<template>
	<div style="height: 100vh;background-color: rgb(247, 247, 247);">
		<div class="zf-nav">
			支付
		</div>
		<div class="zf-top">
			<div>
				<span style="font-size: 2vh;font-weight: 700;">&nbsp;</span><br>
				<!-- <span style="font-size: 2vh;font-weight: 700;">{{name}}</span><br> -->
				<span style="font-size: 5vh;">&yen;{{price}}</span>
			</div>
		</div>
		<div style="height: 6vh; text-align: center;line-height: 6vh; position: relative;border-top: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;background-color: #fff;">
			<div style="position: absolute;left: 2vh;">收款方</div>
			<div style="position: absolute;right: 2vh;">{{userName}}</div>
		</div>
		<div style="padding: 1vh;text-align: left;">
			<el-button type="success"  class="zf-liji" @click="showPopup" >立即支付</el-button>
		</div>
		<van-popup v-model:show="showBottom" position="bottom" :style="{ height: '70vh'}" round closeable
			close-icon-position="top-left">
			<WeChatPayPage :url='url' :close="close" :data='data'></WeChatPayPage>
			</van-popup>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue';
	import WeChatPayPage from './WeChatPayPage.vue'
	export default {
		props:{
			url:String,
			close:Function,
			data:Object,
			name: String
		},
		data(){
			return{
				userName:this.data.user.userName,
				price:this.data.money
			}
		},
		
		setup() {
			const showBottom = ref(false);
			const showPopup = () => {
				showBottom.value = true;
			};
			return {
				showBottom,
				showPopup,
			};
		},
		components:{
			WeChatPayPage
		}
	};
</script>

<style>
	.zf-nav {
		width: 100%;
		height: 6vh;
		background-color: rgb(237, 237, 236);
		text-align: center;
		line-height: 6vh;
		font-size: 2.5vh;
		
	}

	.zf-top {
		text-align: center;
		height: 10vh;
		line-height: 4vh;
		margin-top: 1vh;
	}

	.zf-liji {
		width: 100%;
		height: 6vh;
		margin-top: 3vh;
		border-radius: 1vh;
		background-color: rgb(5, 193, 96);
	}
</style>